<template>
  <view class="nli-detail">
    <u-sticky>
      <view class="sticky-view">
        <view class="nli-detail-title">
          <text>{{ form.title }}</text>
          <u-tag :text="form.classification?.name" shape="square" size="mini" />
        </view>
        <view class="nli-detail-time">
          <text>{{ form.dateTime }}</text>
          <view class="ndt-right" @tap="show = true">
            <u-icon name="more-dot-fill" size="28"></u-icon>
          </view>
        </view> </view
    ></u-sticky>

    <MarkdownTextView :value="form.content" class="markdownTextView" />
    <u-action-sheet
      :list="[{ text: '编辑' }, { text: '删除' }]"
      v-model="show"
      @click="clickAction"
    ></u-action-sheet>
  </view>
</template>

<script setup>
import { reactive, ref, onBeforeUnmount } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import MarkdownTextView from "@/subPages/note/components/MarkdownTextView.vue";
const form = reactive({
  title: "",
  content: "",
  classification: null,
  dateTime: "",
});

const getNoteDetail = async (id) => {
  const res = await vk.callFunction({
    url: "client/note/kh/getNoteDetail",
    data: { _id: id || form._id },
  });
  Object.assign(form, res.data);
};

onLoad((options) => {
  if (options.id) getNoteDetail(options.id);
  uni.setNavigationBarTitle({ title: "笔记详情" });
});

const show = ref(false);

const clickAction = (index) => {
  if (index === 0) {
    // 编辑
    uni.navigateTo({
      url: "/subPages/note/addOrEdit?id=" + form._id,
    });
  } else if (index === 1) {
    // 删除
    del();
  }
};

// 删除
const del = () => {
  uni.vk.confirm("确定删除吗？", "提示").then((res) => {
    if (res.confirm) {
      uni.vk
        .callFunction({
          url: "client/note/kh/deleteNote",
          data: { _id: form._id },
        })
        .then(() => {
          uni.vk.toast("删除成功");
          uni.$emit("refreshNoteList");
          uni.navigateBack();
        });
    }
  });
};

uni.$on("refreshNoteDetail", getNoteDetail);
onBeforeUnmount(() => {
  uni.$off("refreshNoteDetail", getNoteDetail);
});
</script>

<style lang="scss" scoped>
.nli-detail {
  padding: 15px 0;
  .sticky-view {
    background: #fff;
    padding-bottom: 5px;
  }
  .nli-detail-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > text {
      flex: 1;
      user-select: text;
    }
    .u-tag {
      margin-left: 10px;
    }
  }
  .nli-detail-time {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    & > text {
      font-size: 0.9em;
      color: $u-content-color;
    }
    .ndt-right {
      display: flex;
      align-items: center;
      .u-icon {
        transform: scale(0.9);
        margin-left: 5px;
        :deep(.u-icon__label) {
          transform: translateY(-2px);
        }
      }
    }
  }
  .markdownTextView {
    padding: 10px 15px;
  }
}
</style>
